<template>
    <a-collapse class="collapse"
        :class="[PropsKey !== undefined ? 'ShowSwitch' : '', FormValue ? 'ShowContent' : '', { isFirst: isFirst }]"
        :style="{ borderColor: token.colorBorder }" v-model:activeKey="activeKey" :bordered="false" accordion>
        <a-collapse-panel :key="'1'" :header="title" :showArrow="FormValue">
            <template #header>
                <span> {{ title }} </span>
            </template>
            <template #extra v-if="PropsKey !== undefined">
                <div @click.stop>
                    <a-switch class="FormSwitch" v-model:checked="FormValue" />
                </div>
            </template>
            <div class="Content" :style="{ borderTop: `1px solid ${token.colorBorder}` }">
                <slot></slot>
            </div>
        </a-collapse-panel>
    </a-collapse>
</template>
<script setup>
import { ref, watch } from 'vue';
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();
const props = defineProps(['title', 'isFirst', 'Configs', 'Values']);
const PropsKey = ref(props.Configs?.extra?.key);
const activeKey = ref(['1']);

const FormValue = ref(props.Values.props[PropsKey.value]);
watch(() => props.Values.field, (val) => {
    FormValue.value = props.Values.props[PropsKey.value];
    if (PropsKey.value !== undefined) {
        if (FormValue.value) {
            activeKey.value = ['1'];
        } else {
            activeKey.value = [];
        }
    } else {
        activeKey.value = ['1'];
    }
}, { immediate: true })

watch(FormValue, (val) => {
    if (PropsKey.value === undefined) {
        return;
    }
    props.Values.props[PropsKey.value] = val;
    if (val) {
        activeKey.value = ['1'];
    } else {
        activeKey.value = [];
    }
}, { immediate: true })

</script>

<style lang="less" scoped>
:deep(.ant-collapse-header) {
    padding: 4px 16px !important;
    background-color: rgba(0, 0, 0, 0.04);
}

.Content {
    margin: -4px -16px 0 -16px;
    padding: 16px 8px 8px 8px;
}

.isFirst {
    border-top: 1px solid;
}

:deep(.ant-collapse-content-box) {
    padding-bottom: 0px !important;
}

.collapse {
    border-bottom: 1px solid;
    border-radius: 0;
}

.ShowSwitch {
    :deep(.ant-collapse-header) {
        pointer-events: none;
    }

    :deep(.ant-collapse-header-text) {
        padding-left: 24px;
    }

    &.ShowContent {
        :deep(.ant-collapse-header) {
            pointer-events: all;
        }

        :deep(.ant-collapse-header-text) {
            padding-left: 0px;
        }
    }

    .FormSwitch {
        pointer-events: all;
    }
}
</style>